<template>
    <div class="tickCheckbox" @click="clickFn" :class="{ 'tickCheckbox--active': isActive }">
      <slot></slot>
    </div>
</template>

<script>
export default {
  props: ['value', 'checked', 'isRadio'],
  model: {
    prop: 'checked',
    event: 'change'
  },
  data () {
    return {
    }
  },
  methods: {
    clickFn () {
      if (this.checked === this.value.toString()) {
        this.$emit('change', '')
      } else if (this.isRadio) {
        this.$emit('change', this.value.toString())
      } else {
        const valueList = this.checked === '' ? [] : this.checked.split(',')           // 转正为数组
        const value = this.value.toString()             // 值
        const arr = valueList.indexOf(value) !== -1 ? valueList.filter(item => item !== value) : valueList.concat([value])      // 操作数组
        this.$emit('change', arr.toString())
      }
    },
  },
  computed: {
    isActive () {
      return this.checked && this.checked.indexOf(this.value) !== -1
    }
  }
}
</script>

<style>
  .tickCheckbox{
    width: 90px;
    text-align: center;
    margin-right: 10px;
    margin-bottom:10px;
    border: 1px solid gray;
  }
  .tickCheckbox--active{
    border: 1px solid blue;
  }
</style>

